import { Image, List,InfiniteScroll } from 'antd-mobile'

import {useHomeList} from '@/pages/Home/HomeList/useHomeList'
import { useNavigate } from 'react-router-dom'

export type  Props  = {
  channelId :string 
}
const HomeList = (props:Props) => {
  
    const {channelId}  = props
    const {listRes, hasMore,loadMore} =useHomeList(channelId)

    //跳转到文章详情页面
    const navigate = useNavigate()
    const  navigateToDetail = (art_id:string)=>{
      navigate(`/detail?art_id=${art_id}`)
    }
    
  return (
    <>
      <List>
        {listRes?.results.map((item) => (
          <List.Item
            onClick={()=>{navigateToDetail(item.art_id)}}
            key={item.art_id}
            prefix={
              <Image
                src={item.cover.images?.[0]}
                style={{ borderRadius: 20 }}
                fit="cover"
                width={40}
                height={40}
              />
            }
            description={item.pubdate}
            >
            {item.title}
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold ={10}/>
    </>
  )
}

export default HomeList